<template>
    <div class="menu-tree" :style="{height: menuHeight}">
        <el-button v-if="menuList.length == 0 && showRoleAdd" type="primary" size="small" style="margin: 80px 0 0 120px;" @click="handleAddMenu({node:{}},0,1)">新增目录</el-button>
        <treeMenu :treeData="menuList" name="lable" isRightMenu @menuLeftClick="handleMenuClick" 
        @addMenuItem="handleAddMenu" 
        @delMenuItem="handleDelTreeMenu" 
        @editMenuItem="handleAddMenu"
        @importMenuItem="importMenuItem"
        @timeMenuItem="timeMenuItem"
        @gussetMenuItem="gussetMenuItem"
        :isImport = "CATEGROY == 1 || CATEGROY == 2 || CATEGROY == 8 || CATEGROY == 11"
        :isTime="CATEGROY == 1 || CATEGROY == 4"
        :isGusset="CATEGROY == 2 || CATEGROY == 11"
        expandALL
        :showRoleAdd="showRoleAdd"
        :showRoleDel="showRoleDel"
        :showRoleEdit="showRoleEdit"
        ref="treeMenu"/>

        <el-dialog 
            title="目录设置" 
            :visible.sync="menuDialog" 
            width="500px"
            :before-close="handleCloseMenuDialog" 
            v-dialogDrag
        >
            <div class="dialog-body">
                <el-form 
                :model="menuForm" 
                label-width="100px" 
                ref="menuForm"
                :rules="menuRule" 
                >
                <el-form-item label="上级目录" v-if="parentName != ''">
                    <span>{{ parentName }}</span>
                </el-form-item>

                <el-form-item label="目录名称" required prop="treeName">
                    <el-input 
                    v-model="menuForm.treeName" 
                    placeholder="请输入目录名称"
                    prefix-icon="el-icon-edit"
                    size="medium"
                    class="name-input"
                    maxlength="30"
                    show-word-limit
                    >
                    </el-input>
                    <div class="input-tip greyText">建议使用简洁明了的名称,最多30个字符</div>
                </el-form-item>
                
                <el-form-item label="是否最底层" required prop="isBottom">
                    <el-switch v-model="menuForm.isBottom"      active-color="#13ce66" inactive-color="#f0f0f0"  
                        :active-value="1" :inactive-value="0"/>
                    <div class="input-tip redText" v-if="menuForm.isBottom">
                        <i class="el-icon-info"></i>
                        设置为最底层目录，不可再添加子菜单
                    </div>
                </el-form-item>
                <el-form-item label="开始时间" v-show="!treeDataEdit && CATEGROY != 8"> 
                <el-date-picker
                    v-model="menuForm.b_Time"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                    placeholder="开始时间">
                </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" v-show="!treeDataEdit && CATEGROY != 8"> 
                <el-date-picker
                    v-model="menuForm.e_Time"
                    type="date"
                    format="yyyy年MM月dd日"
                    value-format="yyyy-MM-dd"
                    placeholder="开始时间">
                </el-date-picker>
                </el-form-item>
                </el-form>
                </div>
            
            <div class="dialog-footer">
            <el-button 
                @click="handleCloseMenuDialog" 
                size="small" 
                class="cancel-btn"
                icon="el-icon-close"
            >
                取消
            </el-button>
            <el-button 
                type="primary" 
                @click="handleSaveMenuDialog" 
                size="small" 
                class="confirm-btn"
                icon="el-icon-upload"
            >
                保存设置
            </el-button>
            </div>
        </el-dialog>

        <el-dialog
            title="导入节点配置"  
            v-dialogDrag 
            :visible.sync="importDialog" 
            width="680px"
            :close-on-click-modal="false"
            class="import-node-dialog"
            @closed="handleImportDialogClosed"
        >
            <!-- 主要内容区域 -->
            <div class="dialog-content">
                <el-form ref="importForm" :model="importForm" label-width="100px" size="medium" class="import-form">
                    <!-- 导入方式选择 -->
                    <el-form-item label="导入方式" v-if="CATEGROY != 8" class="form-item-enhanced">
                        <div class="import-mode-selector">
                            <div 
                                class="mode-card" 
                                :class="{ active: importForm.tp === 0 }"
                                @click="importForm.tp = 0"
                            >
                                <div class="mode-icon">
                                    <i class="el-icon-sort"></i>
                                </div>
                                <div class="mode-content">
                                    <div class="mode-title">同级导入</div>
                                    <div class="mode-desc">将节点导入到当前选中目录的同级位置</div>
                                </div>
                                <div class="mode-check" v-if="importForm.tp === 0">
                                    <i class="el-icon-check"></i>
                                </div>
                            </div>
                            
                            <div 
                                class="mode-card" 
                                :class="{ active: importForm.tp === 1 }"
                                @click="importForm.tp = 1"
                            >
                                <div class="mode-icon">
                                    <i class="el-icon-folder-opened"></i>
                                </div>
                                <div class="mode-content">
                                    <div class="mode-title">子级导入</div>
                                    <div class="mode-desc">将节点导入到当前选中目录的子级位置</div>
                                </div>
                                <div class="mode-check" v-if="importForm.tp === 1">
                                    <i class="el-icon-check"></i>
                                </div>
                            </div>
                        </div>
                        <div class="operation-tips">
                            <div class="tip-item">
                                <i class="el-icon-info tip-icon"></i>
                                <span class="tip-text">同级就是本级被选当前目录不建目录他的下级创建，作为子级被选的全部作为子集</span>
                            </div>
                        </div>
                    </el-form-item>

                    <!-- 目录选择 -->
                    <el-form-item label="目标目录" class="form-item-enhanced">
                        <div class="directory-section">
                            <div class="directory-selector">
                                <!-- 树形菜单容器 -->
                                <div class="menu-dialog-container">
                                    <treeMenu 
                                        :treeData="moduleMenuList" 
                                        name="lable" 
                                        @menuLeftClick="handleNodeClickImport"
                                        class="custom-tree-menu"
                                    />
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="dialog-footer">
                <el-button 
                    @click="handleImportDialogClosed" 
                    size="small" 
                    class="cancel-btn"
                    :disabled="tableImportLoading"
                >
                    <i class="el-icon-circle-close"></i>
                    取消
                </el-button>
                <el-button 
                    type="primary" 
                    @click="handleSaveImportDialog" 
                    size="small" 
                    class="confirm-btn"
                    :loading="tableImportLoading"
                >
                    <template v-if="!tableImportLoading">
                        <i class="el-icon-circle-check"></i>
                        开始导入
                    </template>
                    <template v-else>
                        导入中...
                    </template>
                </el-button>
            </div>
        </el-dialog>


        <!-- <el-dialog
        title="设置时间"  v-dialogDrag :visible.sync="timeDialog" width="650px" >
        <el-form ref="timeForm" :model="timeForm" label-width="100px" size="medium" v-if="CATEGROY !== 4">
                <el-form-item label="模式">
                    <el-radio-group v-model="timeForm.dtModeID">
                    <el-radio :label="3">时间段</el-radio>
                    <el-radio :label="4">截止时间</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="时间">
                    <div v-if="timeForm.dtModeID == 4">
                    <el-date-picker
                        v-model="timeForm.b_Time"
                        type="date"
                        format="yyyy年MM月dd日"
                        value-format="yyyy/MM/dd"
                        placeholder="选择日期">
                    </el-date-picker>
                    </div>
                    <div v-if="timeForm.dtModeID == 3">
                    <el-date-picker
                        v-model="timeForm.b_Time"
                        type="date"
                        format="yyyy年MM月dd日"
                        value-format="yyyy/MM/dd"
                        placeholder="选择日期">
                    </el-date-picker>
                    至
                    <el-date-picker
                        v-model="timeForm.e_Time"
                        type="date"
                        format="yyyy年MM月dd日"
                        value-format="yyyy/MM/dd"
                        placeholder="选择日期">
                    </el-date-picker>
                    </div>
                </el-form-item>
            </el-form> 
            <el-form ref="timeForm" :model="timeForm" label-width="100px" size="medium" v-if="CATEGROY == 4">
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="timeForm.b_Time"
                        type="date"
                        format="yyyy年MM月dd日"
                        value-format="yyyy/MM/dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="时间长度">
                    <el-input-number v-model="timeForm.t_Len" label="时间长度" :min="1" style="width:220px" placeholder="请输入正整数"></el-input-number>
                     <span style="margin-left: 10px;">天</span>
                </el-form-item>
            </el-form> 
            <div class="btn-dialog">
                <el-button type="primary" @click="handleSaveTimeDialog" size="small" icon="el-icon-circle-check" v-if="!tableImportLoading">保存</el-button>

                 <el-button type="primary" @click="handleSaveImportDialog" size="small" icon="el-icon-loading"  v-if="tableImportLoading">设置中，请稍后</el-button>
            </div> 
        </el-dialog> -->
        <el-dialog
            title="时间设置"  
            v-dialogDrag 
            :visible.sync="timeDialog" 
            width="580px"
            :close-on-click-modal="false"
            class="time-setting-dialog"
        >
        <div class="dialog-content">
            <div v-if="CATEGROY !== 4" class="time-config-section">
                <!-- 模式选择 -->
                <div class="mode-selection">
                    <div class="section-title">
                        <i class="el-icon-set-up"></i>
                        <span>时间模式</span>
                    </div>
                    <div class="mode-cards">
                        <div 
                            class="mode-card" 
                            :class="{ active: timeForm.dtModeID === 3 }"
                            @click="timeForm.dtModeID = 3"
                        >
                            <div class="card-icon">
                                <i class="el-icon-date"></i>
                            </div>
                            <div class="card-content">
                                <div class="card-title">时间段模式</div>
                                <div class="card-desc">设置开始和结束时间范围</div>
                            </div>
                            <div class="card-check" v-if="timeForm.dtModeID === 3">
                                <i class="el-icon-check"></i>
                            </div>
                        </div>
                        
                        <div 
                            class="mode-card" 
                            :class="{ active: timeForm.dtModeID === 4 }"
                            @click="timeForm.dtModeID = 4"
                        >
                            <div class="card-icon">
                                <i class="el-icon-timer"></i>
                            </div>
                            <div class="card-content">
                                <div class="card-title">截止时间模式</div>
                                <div class="card-desc">设置单一截止时间点</div>
                            </div>
                            <div class="card-check" v-if="timeForm.dtModeID === 4">
                                <i class="el-icon-check"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 时间设置 -->
                <div class="time-setting">
                    <div class="section-title">
                        <i class="el-icon-date"></i>
                        <span v-if="timeForm.dtModeID === 4" >截止日期</span>
                            <span v-if="timeForm.dtModeID === 3">时间范围</span>
                    </div>
                    
                    <!-- 截止时间模式 -->
                    <div v-if="timeForm.dtModeID === 4" class="time-input-group single-date">
                        <el-date-picker
                            v-model="timeForm.b_Time"
                            type="date"
                            format="yyyy年MM月dd日"
                            value-format="yyyy/MM/dd"
                            placeholder="请选择截止日期"
                            class="compact-date-picker"
                            :popper-class="'time-picker-popper'"
                        >
                        </el-date-picker>
                        <div class="input-tips">
                            <i class="el-icon-info"></i>
                            <span>设置数据统计的截止时间点</span>
                        </div>
                    </div>

                    <!-- 时间段模式 -->
                    <div v-if="timeForm.dtModeID === 3" class="time-input-group date-range">
                        <div class="range-inputs">
                            <el-date-picker
                                v-model="timeForm.b_Time"
                                type="date"
                                format="yyyy年MM月dd日"
                                value-format="yyyy/MM/dd"
                                placeholder="开始日期"
                                class="compact-date-picker"
                                :popper-class="'time-picker-popper'"
                            >
                            </el-date-picker>
                            <span class="range-separator">至</span>
                            <el-date-picker
                                v-model="timeForm.e_Time"
                                type="date"
                                format="yyyy年MM月dd日"
                                value-format="yyyy/MM/dd"
                                placeholder="结束日期"
                                class="compact-date-picker"
                                :popper-class="'time-picker-popper'"
                            >
                            </el-date-picker>
                        </div>
                        <div class="input-tips">
                            <i class="el-icon-info"></i>
                            <span>设置数据统计的时间范围</span>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="CATEGROY == 4" class="special-mode-section">
                <div class="section-title">
                    <i class="el-icon-date"></i>
                    <span>时间设置</span>
                </div>
                
                <div class="special-inputs">
                    <div class="input-group">
                        <div class="input-label">
                            <i class="el-icon-calendar"></i>
                            <span>基准日期</span>
                        </div>
                        <el-date-picker
                            v-model="timeForm.b_Time"
                            type="date"
                            format="yyyy年MM月dd日"
                            value-format="yyyy/MM/dd"
                            placeholder="请选择基准日期"
                            class="compact-date-picker"
                            :popper-class="'time-picker-popper'"
                            size="small"
                        >
                        </el-date-picker>
                    </div>
                    
                    <div class="input-group">
                        <div class="input-label">
                            <i class="el-icon-watch-1"></i>
                            <span>时间长度</span>
                        </div>
                        <div class="number-input-wrapper">
                            <el-input-number 
                                v-model="timeForm.t_Len" 
                                :min="1" 
                                controls-position="right"
                                placeholder="请输入天数"
                                size="small"
                                class="compact-number-input"
                            ></el-input-number>
                            <span class="unit-text">天</span>
                        </div>
                        <div class="input-tips">
                            <i class="el-icon-info"></i>
                            <span>设置从基准日期开始的时间长度</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="operation-tips">
                <div class="tip-item">
                    <i class="el-icon-warning-outline tip-icon"></i>
                    <span class="tip-text">时间设置将影响数据统计和显示的范围，请谨慎设置</span>
                </div>
            </div>
        </div>
        <div class="dialog-footer">
            <el-button 
                @click="timeDialog = false" 
                size="small" 
                class="cancel-btn"
                :disabled="tableImportLoading"
            >
                <i class="el-icon-circle-close"></i>
                取消
            </el-button>
            <el-button 
                type="primary" 
                @click="handleSaveTimeDialog" 
                size="small" 
                class="confirm-btn"
            >
                <template v-if="!tableImportLoading">
                    <i class="el-icon-date"></i>
                    保存设置
                </template>
                <template v-else>
                    <i class="el-icon-loading"></i>
                    设置中，请稍后...
                </template>
            </el-button>
        </div>
        </el-dialog>


        <el-dialog
        title="节点设置" 
        v-dialogDrag 
        :visible.sync="treeNodeDialog" 
        width="500px"
        class="time-range-dialog"
        :close-on-click-modal="false"
        >
      <div class="dialog-content">
        <!-- 审核状态 -->
        <div class="setting-section">
          <div class="section-header">
            <i class="el-icon-edit-outline"></i>
            <span class="section-title">审核状态</span>
          </div>
          <div class="type-radio-group">
            <el-checkbox-group v-model="treeNodeForm.outliersigNsList" size="small">
                <el-checkbox :label="0" border>未审核</el-checkbox>
                <el-checkbox :label="1" border>审核通过</el-checkbox>
                <el-checkbox :label="2" border>审核未通过</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 时间类型选择 -->
        <div class="setting-section" v-if="CATEGROY == 2">
          <div class="section-header">
            <i class="el-icon-time"></i>
            <span class="section-title">时间类型</span>
          </div>
          <div class="type-radio-group">
            <div :class="treeNodeForm.dtModeID == 3 ? 'type-radio is-checked' : 'type-radio'">
              <div class="radio-content" @click="changeTimeType(3)">
                <i class="el-icon-date"></i>
                <div>
                    <p class="radio-text">时间段</p>
                    <p class="radio-desc">选择开始和结束日期</p>
                </div>
              </div>
            </div>
            <div :class="treeNodeForm.dtModeID == 4 ? 'type-radio is-checked' : 'type-radio'">
              <div class="radio-content" @click="changeTimeType(4)">
                <i class="el-icon-timer"></i>
                <div>
                    <p class="radio-text">截止时间</p>
                    <p class="radio-desc">选择单个截止日期</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 日期设置 -->
        <div class="setting-section" v-if="CATEGROY == 2">
          <div class="section-header">
            <i class="el-icon-setting"></i>
            <span class="section-title">日期设置</span>
          </div>
          
          <!-- 截止时间模式 -->
          <div v-if="treeNodeForm.dtModeID == 4" class="date-setting">
            <div class="date-label">
              <i class="el-icon-arrow-right"></i>
              <span>截止日期</span>
            </div>
            <el-date-picker
              v-model="treeNodeForm.b_Time"
              type="date"
              size="small"
              format="yyyy年MM月dd日"
              value-format="yyyy/MM/dd"
              placeholder="选择截止日期"
              class="compact-date-picker"
            >
            </el-date-picker>
          </div>

          <!-- 时间段模式 -->
          <div v-if="treeNodeForm.dtModeID == 3" class="date-setting">
            <div class="date-range-group">
              <div class="date-item">
                <div class="date-label">
                  <i class="el-icon-caret-right"></i>
                  <span>开始日期</span>
                </div>
                <el-date-picker
                  v-model="treeNodeForm.b_Time"
                  type="date"
                  size="small"
                  format="yyyy年MM月dd日"
                  value-format="yyyy/MM/dd"
                  placeholder="开始日期"
                  class="compact-date-picker"
                >
                </el-date-picker>
              </div>
              <div class="date-item">
                <div class="date-label">
                  <i class="el-icon-caret-left"></i>
                  <span>结束日期</span>
                </div>
                <el-date-picker
                  v-model="treeNodeForm.e_Time"
                  type="date"
                  size="small"
                  format="yyyy年MM月dd日"
                  value-format="yyyy/MM/dd"
                  placeholder="结束日期"
                  class="compact-date-picker"
                >
                </el-date-picker>
              </div>
            </div>
            <!-- 时间段验证 -->
            <div v-if="showDateWarning" class="date-warning">
              <i class="el-icon-warning"></i>
              <span>结束日期不能早于开始日期</span>
            </div>
          </div>
        </div>

        <!-- 快捷操作 -->
        <div class="setting-section" v-if="CATEGROY == 2">
            <div class="section-header">
                <i class="el-icon-position"></i>
                <span class="section-title">快捷操作</span>
            </div>
            <div>
                <el-button size="mini" @click="setQuickDate('today')">今天</el-button>
                <el-button size="mini" @click="setQuickDate('yesterday')">昨天</el-button>
                <el-button size="mini" @click="setQuickDate('week')">本周</el-button>
                <el-button size="mini" @click="setQuickDate('month')">本月</el-button>
                <el-button size="mini" @click="setQuickDate('7days')">最近7天</el-button>
                <el-button size="mini" @click="setQuickDate('15days')">最近15天</el-button>
            </div>
        </div>

        <div v-if="CATEGROY == 11">
            <div class="section-header">
                <i class="el-icon-setting"></i>
                <span class="section-title">日期设置</span>
            </div>
            <div class="date-setting">
                <div class="date-label">
                <i class="el-icon-arrow-right"></i>
                <span>日期</span>
                </div>
                <el-date-picker
                v-model="treeNodeForm.b_Time"
                type="date"
                size="small"
                format="yyyy年MM月dd日"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
                class="compact-date-picker"
                >
                </el-date-picker>
            </div>
            <div class="date-setting">
                <div class="date-label">
                    <i class="el-icon-watch-1"></i>
                    <span>时间长度</span>
                </div>
                <el-input-number 
                    v-model="treeNodeForm.t_Len" 
                    :min="1" 
                    controls-position="right"
                    placeholder="请输入天数"
                    size="small"
                    class="compact-number-input"
                ></el-input-number>
                <span class="unit-text" style="margin-left: 20px;">天</span>
            </div>
        </div>
      </div>

      <div  class="dialog-footer">
        <el-button @click="treeNodeDialog = false" size="small" class="cancel-btn" icon="el-icon-circle-close">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSaveTreeNodeDialog" 
          size="small"
          class="confirm-btn"
          icon="el-icon-upload"
        >
          保存配置
        </el-button>
      </div>
    </el-dialog>  
    </div>

</template>
<script>
import treeMenu from '@/components/base/treeMenu.vue'
import {GetBWTTree,GraphTreeAdd,GraphTreetEdit,GraphTreeDel,ImportTable,SetTime,ImportTree,ImportTableGet} from "@/api/https";
import { findLeafNodes } from '@/utils/treeUtils';
export default ({
    name:'menuAll',
    components:{
        treeMenu
    },
    props:{
        stationId:{
            type:[String,Number],
            default:''
        },
        CATEGROY:{
            type:Number,
            default:0
        },
        menuHeight:{
            type:String,
            default:'calc(100vh - 170px)'
        },
        outCategory:{
            type:Number,
            default:8
        },
        showRoleDel:{
            type:Number,
            default:0,
        },
        showRoleAdd:{
            type:Number,
            default:0,
        },
        showRoleEdit:{
            type:Number,
            default:0,
        },
    },
    data() {
        return {
            menuList:[],
            menuDialog:false,
            menuForm:{},
            timeForm:{},
            treeDataEdit:false,
            treeNodeLevel:'',
            importForm:{},
            importDialog:false,
            moduleMenuList:[],
            tableImportLoading:false,
            timeDialog:false,
            treeID:'',
            treeNodeDialog:false,
            treeNodeForm:{
                outliersigNsList:[]
            },
            menuRule:{
              treeName: [{required: true, message: '请输入目录名称'}],
              isBottom: [{required: true, message: '请选择是否最底层'}],
            },
            parentName:''
        }
    },
    created(){
        this.getMenuList(true)
    },
    beforeDestroy() {
        // 重置所有对话框状态
        this.menuDialog = false;
        this.importDialog = false;
        this.timeDialog = false;
        this.treeNodeDialog = false;
        
        // 清理数据
        this.menuList = [];
        this.moduleMenuList = [];
        this.menuForm = {};
        this.timeForm = {};
        this.importForm = {};
        this.treeNodeForm = { outliersigNsList: [] };
        if (this.$refs.treeMenu) {
            this.$refs.treeMenu = null;
        }
    },
    watch:{
       stationId: {
            handler: 'handleStationIdChange',
            immediate: false
        }
    },
    computed: {
        showDateWarning() {
        if (this.treeNodeForm.dtModeID === 3 && this.treeNodeForm.b_Time && this.treeNodeForm.e_Time) {
            return new Date(this.treeNodeForm.b_Time) > new Date(this.treeNodeForm.e_Time);
        }
        return false;
        },

    },
    methods:{
        handleStationIdChange(newVal, oldVal) {
            if (newVal != oldVal) {
                this.menuList = [];
                this.getMenuList(true);
            }
        },
        getMenuList(isReloadPage) {
            GetBWTTree({
                StationID:this.stationId,
                CATEGROY:this.CATEGROY
            }).then(res=>{  
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.menuList = res.data
                    if(isReloadPage){
                        const leafInfo = findLeafNodes(this.menuList);
                        this.treeID = leafInfo.nodeId;
                        this.currentnNodeData = leafInfo.node
                        this.$nextTick(()=>{
                            this.$refs.treeMenu.$refs.tree.setCurrentKey(this.treeID);
                            this.$emit('getList',this.treeID,this.currentnNodeData)
                        })
                    }
                }else{
                    this.menuList = []
                    this.$emit('getList',0,{})
                }
            })
        },
        handleMenuClick(data) {
            this.treeID = data.id
            this.$emit('getList',this.treeID,data)
        },
        handleAddMenu(data,isEdit,treeNodeLevel){
            this.treeDataEdit = isEdit
            this.treeNodeLevel = treeNodeLevel || ''
            if(isEdit){
                const _editData = Object.assign({},data.node)
                this.menuForm = {..._editData}
                 this.parentName = ''
            }else{
                if(treeNodeLevel == 2){
                    this.parentName = data.lable
                    if(data.node.isBottom){
                        this.$message.error('此目录已设为最底层，编辑目录设置后可添加子级！')
                        return false
                    }
                }else{
                    this.parentName = ''
                }
                this.menuForm = {
                    id: 0,
                    treeID:0,
                    stationID:this.stationId,
                    treeName:'',
                    upTreeID: treeNodeLevel == 1 ? data.node.upTreeID || 0 : data.node.treeID || 0,
                    isBottom:0,
                    graphUrl:'',
                    indexId:0,
                    categroy:this.CATEGROY,
                    graphtype:0,
                    showreference:0,
                    measure:'',
                    reference:'',
                    imgUrl:'',
                    imgDate:'',
                    b_Time:'',
                    e_Time:'',
                }
            }
            this.menuDialog = true
        },
        handleCloseMenuDialog(){
            this.menuDialog = false
            this.menuForm = {}
        },
        handleSaveMenuDialog(){
           this.$refs['menuForm'].validate((valid) => {
            if (valid) {
                if(this.treeDataEdit){
                    GraphTreetEdit(this.menuForm).then(res=>{  
                        if(res.isSuccess){
                            this.handleCloseMenuDialog()
                            this.getMenuList(true)
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }else{
                    GraphTreeAdd(this.menuForm).then(res=>{  
                        if(res.isSuccess){
                            this.handleCloseMenuDialog()
                            this.getMenuList(true)
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }
            }else{
              return false;
            }
          }) 
        },
        handleDelTreeMenu(data){
            this.$confirm(`确认删除名称为 ${data.lable} 的节点？`,'提示',{
                type:'warning'
            }).then(con => {
                GraphTreeDel(data.node.id).then(res=>{  
                    if(res.isSuccess){
                        if(this.treeID == data.node.id){
                            this.tableData = []
                            this.columns = []
                        }
                        this.getMenuList(true)
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }).catch(() => {});  
        },
        importMenuItem(data){
            this.importForm = {
                id: data.node.id,
                tp:0
            }
            GetBWTTree({
                StationID:this.stationId,
                CATEGROY:this.outCategory
            }).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                    this.moduleMenuList = res.data
                }else{
                    this.moduleMenuList = []
                }
            });
            this.importDialog = true
        },
        handleNodeClickImport(data){
            this.importForm.outID = data.id
        },
        handleImportDialogClosed(){
            this.importForm.tp = 0; 
            this.importDialog = false
            this.tableImportLoading = false
        },
        handleSaveImportDialog(){
            if (!this.importForm.outID) {
                this.$message.warning('请先选择目标目录');
                return;
            }
            this.tableImportLoading = true
            if(this.CATEGROY == 1){
                ImportTable({
                    outID:this.importForm.outID,
                    id:this.importForm.id,
                    tp:this.importForm.tp
                }).then(res=>{
                    if(res.isSuccess){
                        this.getMenuList()
                        if(this.importForm.tp == 0){
                            // 同级
                            this.treeID = this.importForm.id
                            this.$nextTick(()=>{
                                this.$refs.treeMenu.$refs.tree.setCurrentKey(this.treeID)
                                this.$emit('getList',this.treeID)
                            }) 
                        }
                        this.moduleMenuList = []
                        this.handleImportDialogClosed()
                    }else{
                        this.$message.error(res.errorMessage)
                        this.tableImportLoading = false
                    }
                })
            }

            if(this.CATEGROY == 2 || this.CATEGROY == 11){
                ImportTree({
                    outID:this.importForm.outID,
                    id:this.importForm.id,
                    tp:this.importForm.tp
                }).then(res=>{
                    if(res.isSuccess){
                        this.getMenuList()
                        if(this.importForm.tp == 0){
                            // 同级
                            this.treeID = this.importForm.id
                            this.$nextTick(()=>{
                                this.$refs.treeMenu.$refs.tree.setCurrentKey(this.treeID)
                                this.$emit('getList',this.treeID)
                            })  
                        }
                        this.handleImportDialogClosed()
                        this.moduleMenuList = []
                    }else{
                        this.$message.error(res.errorMessage)
                        this.tableImportLoading = false
                    }
                })
            }

            if(this.CATEGROY == 8){
                ImportTableGet({
                    outTreeID:this.importForm.outID,
                    inTreeID:this.importForm.id,
                }).then(res=>{
                    if(res.isSuccess){
                        this.getMenuList()
                        this.treeID = this.importForm.id
                        this.$nextTick(()=>{
                            this.$refs.treeMenu.$refs.tree.setCurrentKey(this.treeID)
                            this.$emit('getList',this.treeID)
                        }) 
                        this.moduleMenuList = []
                        this.handleImportDialogClosed()
                    }else{
                        this.$message.error(res.errorMessage)
                        this.tableImportLoading = false
                    }
                })
            }
        },
        timeMenuItem(data){
            if(this.CATEGROY == 4){
                this.timeForm = {...data.node}
                this.timeDialog = true
            }else{
                this.timeForm = {...data.node,dtModeID:data.node.dtModeID ? data.node.dtModeID : 3}
                this.timeDialog = true
            }
            
        },
        handleSaveTimeDialog(){
            this.tableImportLoading = true
            SetTime(this.timeForm).then(res=>{
                if(res.isSuccess){
                    this.getMenuList(true)
                    this.tableImportLoading = false
                    this.timeDialog = false
                }else{
                    this.tableImportLoading = false
                    this.$message.error(res.errorMessage)
                }
            })
        },
        gussetMenuItem(data){
            this.treeNodeForm = {...data.node}
            this.treeNodeDialog = true
        },
        handleSaveTreeNodeDialog(){
            this.tableImportLoading = true
            SetTime(this.treeNodeForm).then(res=>{
                if(res.isSuccess){
                    this.getMenuList(true) 
                    this.tableImportLoading = false
                    this.treeNodeDialog = false
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        changeTimeType(num){
            const _d = {...this.treeNodeForm}
            _d.dtModeID = num
            this.treeNodeForm = {..._d}
        },
        setQuickDate(type) {
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            
            const startOfWeek = new Date(today);
            startOfWeek.setDate(today.getDate() - today.getDay());
            
            const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

            // 最近7天
            const sevenDaysAgo = new Date(today);
            sevenDaysAgo.setDate(today.getDate() - 6); 
            
            // 最近15天
            const fifteenDaysAgo = new Date(today);
            fifteenDaysAgo.setDate(today.getDate() - 14); 
            
            const formatDate = (date) => {
                return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
            };

            switch (type) {
                case 'today':
                this.treeNodeForm.b_Time = formatDate(today);
                this.treeNodeForm.e_Time = ''
                this.treeNodeForm.dtModeID = 4
                break;
                case 'yesterday':
                this.treeNodeForm.b_Time = formatDate(yesterday);
                this.treeNodeForm.e_Time = ''
                this.treeNodeForm.dtModeID = 4
                break;
                case 'week':
                this.treeNodeForm.b_Time = formatDate(startOfWeek);
                this.treeNodeForm.e_Time = formatDate(today);
                this.treeNodeForm.dtModeID = 3
                break;
                case 'month':
                this.treeNodeForm.b_Time = formatDate(startOfMonth);
                this.treeNodeForm.e_Time = formatDate(today);
                this.treeNodeForm.dtModeID = 3
                break;
                case '7days':
                this.treeNodeForm.b_Time = formatDate(sevenDaysAgo);
                this.treeNodeForm.e_Time = formatDate(today);
                this.treeNodeForm.dtModeID = 3
                break;
                case '15days':
                this.treeNodeForm.b_Time = formatDate(fifteenDaysAgo);
                this.treeNodeForm.e_Time = formatDate(today);
                this.treeNodeForm.dtModeID = 3
                break;
            }
        },
    }
})
</script>
<style scoped lang="scss">
.menu-tree{
    overflow-y:auto;
}
.import-node-dialog {
    .import-form {
        .form-item-enhanced {
            ::v-deep .el-form-item__label {
                font-weight: 600;
                color: #303133;
            }
        }
        
        .import-mode-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            
            .mode-card {
                display: flex;
                align-items: center;
                padding: 16px;
                border: 2px solid #e4e7ed;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.3s ease;
                background: #fff;
                position: relative;
                
                &:hover {
                    border-color: #409EFF;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
                }
                
                &.active {
                    border-color: #409EFF;
                    background: #f0f7ff;
                    
                    .mode-icon {
                        background: #409EFF;
                        color: #fff;
                    }
                }
                
                .mode-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f5f7fa;
                    color: #909399;
                    margin-right: 12px;
                    transition: all 0.3s ease;
                    font-size: 18px;
                }
                
                .mode-content {
                    flex: 1;
                    
                    .mode-title {
                        font-weight: 600;
                        color: #303133;
                        margin-bottom: 4px;
                    }
                    
                    .mode-desc {
                        font-size: 12px;
                        color: #909399;
                        line-height: 1.4;
                    }
                }
                
                .mode-check {
                    color: #409EFF;
                    font-size: 16px;
                }
            }
        }
        
        .directory-section {
            .directory-selector {
                .menu-dialog-container {
                    border: 1px solid #e4e7ed;
                    border-radius: 6px;
                    overflow: hidden;
                      
                    .tree-container {
                        height:360px;
                        overflow-y: auto;
                        padding: 8px;
                        
                       
                    }
                }
            }
        }
    }
    
    .operation-tips {
        margin-top: 16px;
        padding: 0 12px;
        background: #f0f9ff;
        border: 1px solid #b3e0ff;
        border-radius: 6px;
        
        .tip-item {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .tip-icon {
                color: #409EFF;
                font-size: 14px;
            }
            
            .tip-text {
                font-size: 13px;
                color: #606266;
            }
        }
    }
}

.time-setting-dialog {
    .dialog-content {
        .section-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f2f5;
            
            i {
                color: #409EFF;
                font-size: 16px;
            }
            
            span {
                font-weight: 600;
                color: #303133;
                font-size: 14px;
            }
        }
        
        .mode-selection {
            margin-bottom: 20px;
            
            .mode-cards {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                
                .mode-card {
                    display: flex;
                    align-items: center;
                    padding: 12px;
                    border: 2px solid #e4e7ed;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    background: #fff;
                    position: relative;
                    
                    &:hover {
                        border-color: #409EFF;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
                    }
                    
                    &.active {
                        border-color: #409EFF;
                        background: #f0f7ff;
                        
                        .card-icon {
                            background: #409EFF;
                            color: #fff;
                        }
                        
                        .card-title {
                            color: #409EFF;
                            font-weight: 600;
                        }
                    }
                    
                    .card-icon {
                        width: 36px;
                        height: 36px;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #f5f7fa;
                        color: #909399;
                        margin-right: 12px;
                        transition: all 0.3s ease;
                        font-size: 16px;
                    }
                    
                    .card-content {
                        flex: 1;
                        
                        .card-title {
                            font-weight: 500;
                            color: #303133;
                            font-size: 13px;
                            margin-bottom: 2px;
                        }
                        
                        .card-desc {
                            font-size: 11px;
                            color: #909399;
                            line-height: 1.3;
                        }
                    }
                    
                    .card-check {
                        color: #409EFF;
                        font-size: 14px;
                    }
                }
            }
        }
        
        .time-setting {
            .time-input-group {
                margin-bottom: 16px;
                
                .input-label {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    margin-bottom: 8px;
                    
                    i {
                        color: #409EFF;
                        font-size: 14px;
                    }
                    
                    span {
                        font-size: 13px;
                        color: #606266;
                        font-weight: 500;
                    }
                }
                
                .compact-date-picker {
                    width: 100%;
                    
                    ::v-deep .el-input__inner {
                        border-radius: 4px;
                    }
                }
                
                .range-inputs {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    .compact-date-picker {
                        flex: 1;
                    }
                    
                    .range-separator {
                        font-size: 12px;
                        color: #909399;
                        font-weight: 500;
                        flex-shrink: 0;
                    }
                }
                
                
            }
        }
        
        .special-mode-section {
            .special-inputs {
                display: flex;
                flex-direction: column;
                gap: 16px;
                
                .input-group {
                    .input-label {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        margin-bottom: 8px;
                        
                        i {
                            color: #409EFF;
                            font-size: 14px;
                        }
                        
                        span {
                            font-size: 13px;
                            color: #606266;
                            font-weight: 500;
                        }
                    }
                    
                    .number-input-wrapper {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        
                        .compact-number-input {
                            width: 140px;
                            
                            ::v-deep .el-input__inner {
                                border-radius: 4px;
                            }
                        }
                        
                        .unit-text {
                            font-size: 13px;
                            color: #606266;
                            
                        }
                    }
                }
            }
        }
        
        .operation-tips {
            margin-top: 16px;
            padding: 10px 12px;
            background: #fff6f6;
            border: 1px solid #fcd3d3;
            border-radius: 4px;
            
            .tip-item {
                display: flex;
                align-items: center;
                gap: 8px;
                
                .tip-icon {
                    color: #f56c6c;
                    font-size: 14px;
                    flex-shrink: 0;
                }
                
                .tip-text {
                    font-size: 12px;
                    color: #f56c6c;
                    line-height: 1.4;
                }
            }
        }
    }

    .input-tips {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        padding: 4px 0;
        
        i {
            color: #909399;
            font-size: 12px;
        }
        
        span {
            font-size: 11px;
            color: #909399;
        }
    }
}

::v-deep .time-picker-popper {
    .el-picker-panel {
        border-radius: 6px;
        border: 1px solid #e4e7ed;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }
    
    .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
        background: #409EFF;
    }
}

.time-range-dialog{
    /* 设置区域 */
.setting-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.section-header i {
  color: #409EFF;
  margin-right: 6px;
  font-size: 14px;
}

.section-title {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

/* 时间类型选择 */
.type-radio-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.type-radio {
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.3s;
}

.type-radio:hover {
  border-color: #409EFF;
  background: #f0f7ff;
}

.is-checked {
  border-color: #409EFF;
  background: #f0f7ff;
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-content i {
  font-size: 16px;
  color: #409EFF;
}

.radio-text {
  font-weight: 500;
  color: #303133;
  font-size: 13px;
}

.radio-desc {
  font-size: 12px;
  color: #909399;
  margin-left: auto;
}

/* 日期设置 */
.date-setting {
  margin-top: 8px;
}

.date-label {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  color: #606266;
}

.date-label i {
  margin-right: 4px;
  font-size: 12px;
  color: #409EFF;
}

.date-range-group {
  display: flex;
  gap: 12px;
}

.date-item {
  flex: 1;
}

.compact-date-picker {
  width: 100%;
}
/* 日期验证警告 */
.date-warning {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  font-size: 12px;
  color: #f56c6c;
}

.date-warning i {
  margin-right: 4px;
}
}
</style>
